<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.min.js"></script>
</head>

<body>
    <div id="app">

        <!-- 分析 -->
        <!-- 1，我们要监听 文本框数据的改变，这样才能知道 什么时候去拼接fullname -->
        <!-- 2.如何监听到 文本框数据的改变 -->


        <input type="text" v-model="firstname"> +
        <input type="text" v-model="lastname"> =
        <input type="text" v-model="fullname">
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                firstname: '',
                lastname: ''
            },
            methods: {},
            //在 computed 中，可以定义一些 属性， 这些属性叫做 【计算属性】，计算属性的本质 就是 一个方法，
            //只不过 我们在使用 这些计算属性的时候，直接当做 属性 来使用，并不会把 计算属性 当做方法来调用。

            //1.注意: 计算属性，在引用的时候，一定不要加 () 去调用，直接把 它当做普通属性去使用就好了。
            //2.注意: 只要计算属性，这个function内部，所用到的 任何 data 中的数据发生了变化，就会重新计算 这个计算属性的值
            //3.注意: 计算属性的求值结果，会被缓存起来，方便下次直接使用，如果计算属性中所依赖的数据 都没有 发生过变化，则不会
            //对计算属性求值。
            computed: {
                fullname: function () {
                    return this.firstname + '-' + this.lastname
                }
            },
        })
    </script>
</body>

</html>